import React, { Component } from 'react'
import {Carousel,List,Card} from 'antd'
import MusicList from '../components/MusicList.jsx'
import '../static/css/index.css'

export default class Index extends Component {
    state = {
        bannerList: [],
        personalized: [],
        personalized_newsong: []
    }
    getBanner(){
        this.$http.get("/banner").then(
            res=>{
                const data = res.data.banners
                this.setState({bannerList:data})
            }
        )
    }
    getPersonalized(){
        this.$http.get("/personalized").then(
            res=>{
                const data = res.data.result
                this.setState({personalized:data})
            }
        )
    }
    getPersonalizedNewsong(){
        this.$http.get("/personalized/newsong").then(
            res=>{
                const data = res.data.result
                this.setState({personalized_newsong:data})
            }
        )
    }
    componentWillMount(){
        // 加载banner
        this.getBanner()
        // 价值专辑
        this.getPersonalized()
        // 加载热歌
        this.getPersonalizedNewsong()
    }

    render() {
        var array = this.state.personalized_newsong
        return (
            <div id="index_app">
                <Carousel>
                    {this.state.bannerList.map((item,index)=>{
                        return <div key={index}>
                            <img style={{width: "100%"}} src={item.imageUrl}/>
                        </div>
                    })}
                    
                </Carousel>
                <div className="section">
                    <h3>推荐歌单</h3>
                    <List
                        grid={{
                            gutter: 16,
                            column: 3
                        }}
                        dataSource={this.state.personalized}
                        renderItem={item => (
                        <List.Item onClick={()=>{this.props.history.push('/hot?id='+item.id)}}>
                            <Card>
                                <img src={item.picUrl}/>
                                <h5 style={{width: 80,overflow: 'hidden',whiteSpace:'nowrap'}}>{item.name}</h5>
                            </Card>
                        </List.Item>
                        )}
                    />
                </div>
                <div className="section">
                    <h3>最新音乐</h3>
                    <MusicList pn={array}/>
                </div>
            </div>
        )
    }
}
